<!DOCTYPE html>
<html>

<head>
    <title>Customize your own components </title>
    <script type="text/javascript" src="https://unpkg.com/dat.gui@0.7.6/build/dat.gui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
    <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.js"></script>
    <script type="text/javascript" src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/maptalks.three@latest/dist/maptalks.three.js"></script>
    <script type="text/javascript" src="https://unpkg.com/three@0.138.0/examples/js/libs/stats.min.js">
    </script>
    <style>
        html,
        body {
            margin: 0px;
            height: 100%;
            width: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
            background-color: #000;
        }

    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = new maptalks.Map("map", {
            center: [122.05868611616324, 37.38234727127778],
            zoom: 16,
            pitch: 60,
            centerCross: true,
            doubleClickZoom: false,
            baseLayer: new maptalks.TileLayer('tile', {
                urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c', 'd'],
                attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            })
        });

        var threeLayer = new maptalks.ThreeLayer('t', {
            forceRenderOnMoving: true,
            forceRenderOnRotating: true,
            // animation: true
        });


        threeLayer.prepareToDraw = function (gl, scene, camera) {
            stats = new Stats();
            stats.domElement.style.zIndex = 100;
            document.getElementById('map').appendChild(stats.domElement);

            var light = new THREE.DirectionalLight(0xffffff);
            light.position.set(0, -10, 10).normalize();
            scene.add(light);
            addRingEffect();

        };
        threeLayer.addTo(map);

        var ringObj, material;

        function addRingEffect() {
            material = getMaterial(0);
            ringObj = new RingEffect(map.getCenter(), {
                radius: 100
            }, material, threeLayer)
            threeLayer.addMesh(ringObj);
            initGui();
            animation();
        }

        function animation() {
            // layer animation support Skipping frames
            if (threeLayer._needsUpdate) {
                threeLayer.redraw();
            }
            stats.update();
            requestAnimationFrame(animation);
        }

        function getMaterial(type = 0) {
            var ringShield = {
                uniforms: {
                    color: {
                        type: "c",
                        value: new THREE.Color("#9999FF")
                    },
                    time: {
                        type: "f",
                        value: -1.5
                    },
                    type: {
                        type: "f",
                        value: type || 0
                    },
                    num: {
                        type: "f",
                        value: 4
                    }
                },
                vertexShaderSource: `
                    varying vec2 vUv;
                    void main(){
                            vUv = uv;
                            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                    }`,
                fragmentShaderSource: `
                    uniform float time;
                    uniform vec3 color;
                    uniform float type;
                    uniform float num;
                    varying vec2 vUv;
                    void main(){
                        float alpha = 1.0;
                        float dis = distance(vUv,vec2(0.5));//0-0.5
                        if(dis > 0.5){
                            discard;
                        }
                        if(type ==0.0){
                                float y = (sin(6.0 * num *(dis-time)) + 1.0)/2.0;
                            alpha = smoothstep(1.0,0.0,abs(y-0.5)/0.5) * (0.5 -dis) * 2.;
                        }else if(type ==1.0){
                                float step = fract(time* 4.)* 0.5;
                            if(dis<step){
                                    // alpha = smoothstep(1.0,0.0,abs(step-dis)/0.15);
                                alpha =1.- abs(step-dis)/0.15;
                            }else{
                                    alpha = smoothstep(1.0,0.0,abs(step-dis)/0.05);
                            }
                            alpha *= (pow((0.5 -dis)* 3.0,2.0));
                        }
                        gl_FragColor = vec4(color,alpha );
                    }`
            };
            let material = new THREE.ShaderMaterial({
                uniforms: ringShield.uniforms,
                defaultAttributeValues: {},
                vertexShader: ringShield.vertexShaderSource,
                fragmentShader: ringShield.fragmentShaderSource,
                blending: THREE.AdditiveBlending,
                depthWrite: !1,
                depthTest: !0,
                side: THREE.DoubleSide,
                transparent: !0,
                fog: !0
            });
            return material;
        }



        function initGui() {
            var params = {
                add: true,
                color: material.uniforms.color.value.getStyle(),
                show: true,
                altitude: 0,
                speed: ringObj.getOptions().speed
            };

            var gui = new dat.GUI();
            gui.add(params, 'add').onChange(function () {
                if (params.add) {
                    threeLayer.addMesh(ringObj);
                } else {
                    threeLayer.removeMesh(ringObj);
                }
            });
            gui.addColor(params, 'color').name('circle color').onChange(function () {
                material.uniforms.color.value.setStyle(params.color);
            });
            gui.add(params, 'altitude', 0, 3000).onChange(function () {
                ringObj.setAltitude(params.altitude);
            });
            gui.add(params, 'speed', 0.001, 0.3, 0.00001).onChange(function () {
                ringObj.options.speed = params.speed;
            });
        }


        //default values
        var OPTIONS = {
            speed: 0.005,
            radius: 1,
            altitude: 0,
            interactive: false
        };

        /**
         * custom  component
         *
         * you can customize your own components
         * */

        class RingEffect extends maptalks.BaseObject {
            constructor(coordinate, options, material, layer) {
                options = maptalks.Util.extend({}, OPTIONS, options, {
                    layer,
                    coordinate
                });
                super();
                //Initialize internal configuration
                // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L135
                this._initOptions(options);
                const {
                    altitude,
                    radius
                } = options;
                //generate geometry
                const r = layer.distanceToVector3(radius, radius).x;
                const geometry = new THREE.RingBufferGeometry(0.001, r, 20, 5, 0, Math.PI * 2);

                //Initialize internal object3d
                // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L140
                // this._createMesh(geometry, material);
                this._createGroup();
                const mesh = new THREE.Mesh(geometry, material);
                this.getObject3d().add(mesh);
                //set object3d position
                const z = layer.distanceToVector3(altitude, altitude).x;
                const position = layer.coordinateToVector3(coordinate, z);
                this.getObject3d().position
                    .copy(position);
            }

            _animation() {
                const ring = this.getObject3d().children[0];
                const speed = this.getOptions().speed;
                ring.material.uniforms.time.value += speed;
            }
        }

    </script>
</body>

</html>
